<template>
  <div class="treeBar">
    <div class="box-card">
      <el-tree
        ref="tree"
        :show-checkbox="!hideCheckBox"
        highlight-current
        empty-text="暂无数据"
        :style="{'--lightOpacity':lightTheme}"
        class="left-tree"
        :data="tree"
        :load="load"
        lazy
        :props="defaultProps"
        :default-expand-all="false"
        :expand-on-click-node="false"
        :highlight-current="true"
        :current-node-key="currentKey"
        node-key="id"
        @node-click="handleNodeClick"
        @check-change="handleCheckChange"
      />
    </div>
    <div class="userlist">
      <dt-table
        ref="tableRef"
        v-loading="loading"
        :table-opts="{
          tableData: tableData,
          rowKey: 'userId',
          configPagination: '1',
          // 表格第一列
          firstTableCol: {
            select: !hideCheckBox,
            width: 55,
            fixed: 'left',
            align: 'center',
            type: 'selection'
          },
          tableCol: [
            {
              prop: 'account',
              label: '账号',
              show: true
            },
            {
              prop: 'realName',
              label: '姓名',
              show: true,
              search: true
            }
          ],
        }"
        :pagination-data="{
          total:total,
          queryParams:filterForm
        }"
        :is-column-search="false"
        :is-show-column="false"
        @pagination="pagination"
        @handleSelectionChange="handleSelectionChange"
        @searchReset="handleReset"
        @searchChange="handleQuery"
        @radioChange="radioChange"
      >
      </dt-table>
    </div>
  </div>
</template>

<script>
import hrOrganizationApi from "@/framework/api/userCenter/hrOrganization";
import sysUserApi from "@/framework/api/userCenter/sysUser";

export default {
  name: "GroupUser",
  props: {
    hideCheckBox: Boolean
  },
  data () {
    return {
      treeCheckedKeys: [],
      tree: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      currentKey: '',
      filterForm: {
        realName: '',
        pageNo: 1,
        pageSize: 10
      },
      loading: false,
      // 总条数
      total: 0,
      multipleSelection: [],
      tableData: []
    }
  },
  computed: {
    lightTheme() {
      return `${this.$store.state.settings.theme}19`
    }
  },
  methods: {
    // 获取左侧组织树
    initTree() {
      const that = this
      hrOrganizationApi.getOrgListTreeNode({ orgId: 0 }).then((res) => {
        that.tree = res.data
        this.currentKey = res.data[0].id
        this.getList()
        this.$nextTick(() => {
          this.$refs.tree.setCurrentKey(res.data[0].id)
        })
      })
    },
    // 懒加载
    load(tree, resolve) {
      let orgid = ''
      if (!tree.data || tree.data.length == 0) {
        orgid = 0
        return
      } else {
        orgid = tree.data.id
      }
      hrOrganizationApi.getOrgListTreeNode({ orgId: orgid }).then((res) => {
        const data = res.data.map((item, index) => {
          this.currentKey = res.data[0].id

          this.$nextTick(() => {
            this.$refs.tree.setCurrentKey(res.data[0].id)
          })
          return item
        })
        resolve(data)
      })
    },
    // 左侧树结构
    handleNodeClick(data) {
      this.currentKey = data.id
      this.handleQuery()
    },
    setInfo(){
      this.$emit('getGroupUser', {
        tree: this.treeCheckedKeys,
        users: this.multipleSelection
      })
    },
    handleCheckChange(){
      this.treeCheckedKeys = this.$refs.tree.getCheckedKeys();
      this.setInfo()
    },
    /** 搜索按钮操作 */
    handleQuery(formModel) {
      this.filterForm = { ...this.filterForm, ...formModel }
      // this.filterForm = Object.assign(this.filterForm, formModel)
      this.filterForm.pageNo = 1
      this.getList()
    },
    /** 重置按钮操作 */
    handleReset() {
      this.filterForm = {
        realName: '',
        pageNo: 1,
        pageSize: 10
      }
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(val) {
      this.multipleSelection = val
      this.setInfo()
    },
    // 获取页面列表
    getList() {
      this.loading = true
      sysUserApi.fetchPage({...this.filterForm, orgId: this.currentKey, containSelf: false}).then((res) => {
        this.tableData = res.data.rows
        this.total = res.data.totalRows
        this.loading = false
      })
    },
    pagination() {
      this.getList()
    },
    radioChange(row){
      this.$emit('getGroupUser', row)
    }
  }
}
</script>

<style lang="scss" scoped>
.treeBar{
  width: 100%;
  display: flex;
  justify-content: flex-end;
  position: relative;
  .box-card{
    width: 30%;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
  }
  .box-card,
  .userlist{
    box-sizing: border-box;
    border-radius: 3px;
    border: 1px solid #e8e8e8;
    padding: 16px;
    overflow-y: auto;
  }
  .userlist{
    width: calc(70% - 16px);
    ::v-deep .filter-container{
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      .el-button {
        align-self: flex-start;
        margin-bottom: 16px;
      }
    }
  }
}
</style>
